<template>
    <div class="header-container">
        <div class="header-left flex-box">
            <el-icon class="icon" size="20" @click="collapse">
                <Fold />
            </el-icon>
            <ul class="flex-box">
                <li v-for="(item, index) in Menu" :key="item.path" class="tab flex-box">
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <router-link :to="item.path">{{ item.name }}</router-link>
                    <el-icon class="close-icon" @click="closeTab(item, index)">
                        <CircleClose />
                    </el-icon>
                </li>
            </ul>
        </div>

        <div class="header-right">
            <el-dropdown>
                <div class="el-dropdown-link">
                    <el-avatar :src="userInfo.avatar" />
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-on:click="handleClick">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <p class="user-name">{{ userInfo.name }}</p>
        </div>
    </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { computed, ref,reactive } from 'vue';
import { useRouter } from 'vue-router';

const userInfo=reactive(JSON.parse(localStorage.getItem('pz_userInfo')));

const router = useRouter();// 路由实例;

const store = useStore();// vuex实例;

const collapse = () => {// 折叠菜单;
    store.commit('collapseMenu');
    // console.log('collapse');
}

const closeTab = (item, index) => {
    store.commit('removeMenu', index);

    router.push(item.path);
    // console.log('closeTab');
}

const Menu = computed(() => store.state.menu.selectMenu);

const handleClick = () => {
    localStorage.removeItem('pz_token');
    localStorage.removeItem('pz_userInfo');
    localStorage.removeItem('pz_v3pz');
    router.push('/login')
}
</script>

<style lang="less" scoped>
.flex-box {
    display: flex;
    align-items: center;
}

.header-container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 25px;
    background-color: rgb(255, 255, 255);

    .header-left {

        .icon {
            width: 40px;
            height: 40px;
        }

        .icon:hover {
            background-color: rgb(209, 209, 209);
            border-radius: 50%;
            cursor: pointer;
        }

        .tab {
            width: 120px;
            height: 50px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;

            .close-icon {
                display: none;
            }
        }

        .tab:hover {
            background-color: rgb(228, 228, 228);
            cursor: pointer;

            .close-icon {
                display: block;
            }

            .el-icon {
                color: rgb(65, 163, 255);
            }

            a {
                color: rgb(65, 163, 255);
            }
        }
    }

    .header-right {
        width: 11%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }
}
</style>